﻿{% load static %}
<!DOCTYPE html>
<html lang="">
<head>
    <title>userHome</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script src="{% static 'js/vue.js' %}"></script>
    <script src="{% static 'js/axios.js' %}"></script>
    <script src="{% static 'element-ui/index.js' %}"></script>
    <link rel="stylesheet" href="{% static 'element-ui/index.css' %}">
    <link rel="stylesheet" href="{% static 'css/userhome.css' %}">
    <script src="{% static 'js/echarts.js' %}"></script>
    <style>
        .el-menu-item {
            text-align: center;
            height: 16%;
        }


        .updateimg {
            width: 50%;
            height: 51%;
            position: absolute;
            top: 10px;
            left: 25%;

        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 200px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }

        .flipped {
            transform: rotateY(180deg);
        }

        .front, .back {
            cursor: pointer;
            width: 50%;
            position: absolute;
            left: 25%;
            height: 100%;
            border-radius: 12px;
            backface-visibility: hidden;
            background: white;
            z-index: 1;
        }

        .front {
            box-shadow: 5px 3px 3px 2px rgba(0, 0, 0, 0.3);
        }

        .back {
            box-shadow: 3px 3px 5px 2px rgba(0, 0, 0, 0.3);
            transform: rotateY(180deg);
        }

    </style>
</head>
<body>
<div id="userHome" style="height: 100%;width: 100%">
    <!-- 顶层显示 -->
    <div style="position: absolute;width:100%;height: 30%;border-bottom: 1px solid ">
        <!-- 走马灯 -->
        <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item>
                <el-image src="{% static 'img/1.png' %}" fit="scale-down"></el-image>
            </el-carousel-item>
            <el-carousel-item>
                <el-image src="{% static 'img/2.png' %}" fit="scale-down"></el-image>
            </el-carousel-item>
            <el-carousel-item>
                <el-image src="{% static 'img/3.png' %}" fit="scale-down"></el-image>
            </el-carousel-item>
            <el-carousel-item>
                <el-image src="{% static 'img/4.png' %}" fit="scale-down"></el-image>
            </el-carousel-item>
        </el-carousel>
    </div>

    <!-- 功能菜单 -->
    <div id="u22" class="ax_default box_1" style="width: 20%;height: 70%;position: absolute;top: 30%;left: 0">
        <el-menu
                style="width: 100%;height: 100%"
                default-active="1"
                class="el-menu-vertical-demo"
        >
            <el-menu-item index="1" @click="cursor=0" @dblclick="to_home" style="width: 100%;height: 16%">
                <i class="el-icon-s-home"></i>
                <span slot="title">我的</span>
            </el-menu-item>
            <el-menu-item index="2" @click="showRecent" style="width: 100%;height: 16%">
                <i class="el-icon-menu"></i>
                <span slot="title">最近</span>
            </el-menu-item>
            <el-menu-item index="3" @click="showArt" style="width: 100%;height: 16%">
                <i class="el-icon-s-order"></i>
                <span slot="title">文章</span>
            </el-menu-item>
            <el-menu-item index="4" @click="showDianz" style="width: 100%;height: 16%">
                <i class="el-icon-star-on"></i>
                <span slot="title">点赞</span>
            </el-menu-item>
            <el-menu-item index="5" @click="getFriends" style="width: 100%;height: 16%">
                <i class="el-icon-user-solid"></i>
                <span slot="title">好友</span>
            </el-menu-item>
            <el-menu-item index="6" @click="isShow=true" style="width: 100%;height: 16%">
                <i class="el-icon-setting"></i>
                <span slot="title">编辑</span>
            </el-menu-item>
        </el-menu>
    </div>
    <!-- 主区域 -->
    <div id="u24" class="main_2"
         style="width: 80%;height: 70%;position: absolute;left: 20%;top: 30%;overflow-x: hidden">
        <div style="width: 100%;height: 2px;position: absolute;top:0;background:rgb(246,248,254)">
            <el-page-header @back="to_home" content="个人主页">
            </el-page-header>
        </div>
        <!-- 个人主页 -->
        <div id="m1" v-show="cursor===0" :class="{ flipped: isFlipped }">
            <div class="front" @click="toggleFlip">
                <div class="updateimg">
                    <el-upload
                            class="avatar-uploader"
                            :action="uploadurl"
                            :on-success="reload"
                            :show-file-list="false"
                            :before-upload="beforeAvatarUpload"
                    >
                        <img :src="user.img" class="avatar">
                    </el-upload>
                </div>
                <div style="position: absolute;display: flex;flex-direction: row;width: 399px;height: 50px;top: 220px">
                    <div class="d1" style="left: 68px">昵称:</div>
                    <div class="d1" style="left: 128px;width: 150px" v-text="user.nickname"></div>
                </div>
                <div style="position: absolute;display: flex;flex-direction: row;width: 399px;height: 50px;top: 290px">
                    <div class="d1" style="left: 68px">鱼号:</div>
                    <div class="d1" style="left: 128px;top: 5px" v-text="user.user_id"></div>
                </div>
            </div>
            <div class="back" @click="toggleFlip">
                <div style="position: absolute;width: 100%;top: 5% ;height: 7%;font-size: 23px;text-align: center">
                    个人简介
                </div>
                <div style="background:white;z-index:3;box-shadow: 3px 3px 5px 2px rgba(0, 0, 0, 0.3);position: absolute;width: 80%;left:10%;border-radius:10px;bottom: 11%;height: 70%;white-space: pre-wrap;word-wrap: break-word"
                     v-text="user.introduction">
                </div>
            </div>
        </div>
        <!-- 最近 -->
        <div id="m2" v-show="cursor===1"></div>
        <!--  文章/点赞 -->
        <div id="m3" v-show="cursor===2" ref="mydiv">
            <div style="width: 100%;height: 50px;border-bottom: 1px solid" v-show="n===1">
                <el-menu style="width: 100%;height: 50px" default-active="1" class="el-menu-demo" mode="horizontal">
                    <el-menu-item index="1" style="width: 25%;text-align: center" @click="change_s(2)">全部
                    </el-menu-item>
                    <el-menu-item index="2" style="width: 25%;text-align: center" @click="change_s(1)">已通过
                    </el-menu-item>
                    <el-menu-item index="3" style="width: 25%;text-align: center" @click="change_s(0)">审核中
                    </el-menu-item>
                    <el-menu-item index="4" style="width: 25%;text-align: center" @click="change_s(-1)">未通过
                    </el-menu-item>
                </el-menu>
            </div>
            <div class="m33" v-for="(article,index) in articles"
                 :style="{ top: `${60 + index * 240}px`, background:art_back(article.statu) }">
                <div style="font-weight: bold;font-style: italic;width: 500px;height: 40px;position: absolute;left:300px;top: 20px;font-size: 24px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
                     v-text="article.title"></div>
                <!-- 封面 -->
                <div style="width: 180px;height: 220px;position: absolute">
                    <el-avatar shape="square" fit="cover"
                               :src="article.img"
                               style="width: 180px;height: 220px;border-radius: 10px 0 0 10px" lazy></el-avatar>
                </div>
                <div class="content" style="resize:none;">
                    <div style="display: -webkit-box;-webkit-line-clamp: 3; -webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;"
                         v-html="article.zhaiyao">
                    </div>
                </div>
                <el-link type="primary" style="position: absolute;right: 100px;bottom: 5px"
                         @click="to_xq(article)">阅读全文
                </el-link>
                <div style="position: absolute;width: 90px;height: 40px;bottom: 2px;right: 2px;display: flex;flex-direction: row" v-show="n===1">
                    <el-popconfirm
                            @confirm="delete_art"
                            confirm-button-text='狠心删除'
                            cancel-button-text='回心转意'
                            icon="el-icon-info"
                            icon-color="red"
                            title="确定要删除该文章吗(⋟﹏⋞)"
                    >
                        <el-button type="danger" icon="el-icon-delete" @click="delete_aid=article.art_id;delete_index=index" slot="reference" circle></el-button>
                    </el-popconfirm>
                    <el-button style="margin-left: 10px" type="primary" icon="el-icon-edit" circle @click="to_fabu(article)"></el-button>
                </div>
            </div>
        </div>
        <div id="m4" v-show="cursor===3">
            <div style="position: absolute;width: 20%;height: 20%;left: 40%;top:40%">功能开发中</div>
        </div>

        <!-- 好友列表-->
        <div class="friend" v-show="cursor===3">
            <div style="width: 100px;height: 40px;position: absolute;left: 85px;top: 20px;font-size: 25px">好友列表
            </div>
            <!-- 列表 -->
            <div class="friendsList">
                <div style="width: 200px;height: 50px;position: relative;left: 35px;margin-top: 5px;background: white;border: 1px dashed;border-radius: 10px"
                     v-for="f in friends">
                    <div style="position: absolute;left: 5px;top:5px;width: 40px;height: 40px;">
                        <el-avatar :style="showImg(f.status)" shape="square" :size="40" fit="fill"
                                   :src="f.img"></el-avatar>
                    </div>
                    <div style="height: 30px;width: 120px;position: absolute;top:16px;right: 11px;font-size: 16px;text-align: left"
                         v-text="f.nickname">
                    </div>
                </div>
            </div>

        </div>

        <el-dialog
                title="编辑"
                :visible.sync="isShow"
                width="30%"
                center>
            <el-form ref="form" :model="user" label-width="80px">
                <el-form-item label="昵称">
                    <el-input v-model="user.nickname"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="user.email"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <div class="block">
                        <el-cascader
                                v-model="user.place"
                                :options="options"
                                :props="{ expandTrigger: 'hover' }"></el-cascader>
                    </div>
                </el-form-item>
                <el-form-item label="个人简介">
                    <el-input type="textarea" v-model="user.introduction"></el-input>
                </el-form-item>
                <el-form-item label="验证码" v-show="temp_mail!==user.email">
                    <el-input v-model="user.code" style="width: 100px"></el-input>
                    <el-button type="primary" @click="send_email" v-show="!is_send">发送</el-button>
                    <el-button type="primary" @click="send_email" v-show="is_send" disabled>已发送</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="update_user" style="width: 100px">修改</el-button>
                    <el-button style="width: 100px" @click="isShow=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</div>
<script>
    window.user_dj = JSON.parse('{{ datas|safe }}');
</script>
<script src="{% static 'js/userHome.js' %}"></script>
</body>
</html>
